import React from "react";
import ReactDOM from "react-dom/client"

// 导入css文件
import "./index2.css"


let root = ReactDOM.createRoot(document.getElementById('root'))
// jsx样式操作有两种
// 1、行内样式  有两种写法
// 2、添加类名      引入外部css 文件
//    动态类名控制
let styleObj = {
    width:"300px",
    height:'200px',
    backgroundColor:'blue'
}
let flag = false
let pp = (
   <div >
       <h1>jsx样式操作</h1>
       <p style={{color:'red',backgroundColor:'pink'}}>行内样式一</p>
       {/* 行内样式的简写 */}
       <div style={styleObj}>行内样式二</div>
       <hr></hr>
       <div className={flag?"box":""}>添加类名</div>
   </div>
)


/*
jsx小结：
// 1、jsx是react的核心内容
1.JSX 是React的核心内容。
2. JSX 表示在JS代码中写HTML结构，是React声明式的体现。
3. 使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意 UI结构。
4. 推荐使用 className 的方式给JSX添加样式。
5.JSX必须有一个根节点，如果没有根节点，可以使用<>  </>（幽灵节点）替代
6.所有标签必须形成闭合，成对闭合或者自闭合都可以
7.JSX中的语法更加贴近JS语法，属性名采用驼峰命名法  class -> className  for-> htmlFor
*/



root.render(pp)